import Hero from '@/components/openmetadata/Hero'
import { KeyFeatures } from '@/components/openmetadata/KeyFeatures'
import Schedule from '@/components/home/Schedule'
import { LogoJsonLd, NextSeo, WebPageJsonLd, BreadcrumbJsonLd, FAQPageJsonLd } from 'next-seo'
import Layout from '@/components/Layout'
import { CommonUseCases } from '@/components/openmetadata/CommonUseCases'
import { FAQ } from '@/components/FAQ'

export default function DataHub() {
  const faqItems = [
    {
      question: 'What is PortalJS?',
      answer: 'PortalJS is a modern frontend framework (Next.js-based) for building fast, customizable data portals — compatible with DataHub, Microsoft Purview, OpenMetadata, CKAN, and other backends.'
    },
    {
      question: 'Does PortalJS replace DataHub?',
      answer: 'No. It works with your DataHub backend — just replaces the frontend for better UX.'
    },
    {
      question: 'Can I use PortalJS without modifying DataHub\'s backend?',
      answer: 'Yes. PortalJS works as a decoupled frontend — no need to touch your metadata engine.'
    },
    {
      question: 'Is this open source or commercial?',
      answer: 'PortalJS is open source. PortalJS Cloud offers a fully managed SaaS version with support and custom features.'
    },
  ];

  return (
    <Layout isHomePage={true}>
      <FAQPageJsonLd
        mainEntity={faqItems.map(item => ({
          questionName: item.question,
          acceptedAnswerText: item.answer
        }))}
      />
      <div className="flex justify-center">
        <div className="max-w-8xl px-4 sm:px-8 xl:px-12">
          <LogoJsonLd
            url="https://portaljs.com"
            logo="https://portaljs.com/icon.png"
          />
          <NextSeo
            title="Turn DataHub into a Business-Friendly Data Catalog"
            description="Transform DataHub's technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance."
            canonical="https://portaljs.com/datahub"
            openGraph={{
              url: 'https://portaljs.com/datahub',
              title: 'Turn DataHub into a Business-Friendly Data Catalog',
              description: 'Transform DataHub\'s technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance.',
              site_name: 'PortalJS',
            }}
          />
          <WebPageJsonLd
            id="https://portaljs.com/datahub#webpage"
            url="https://portaljs.com/datahub"
            title="Turn DataHub into a Business-Friendly Data Catalog"
            description="Transform DataHub's technical interface into intuitive data catalogs for business users. Create multiple user-specific portals from a single DataHub instance."
          />
          <BreadcrumbJsonLd
            itemListElements={[
              {
                position: 1,
                name: 'Home',
                item: 'https://portaljs.com',
              },
              {
                position: 2,
                name: 'DataHub',
                item: 'https://portaljs.com/datahub',
              },
            ]}
          />
          <Hero productName="DataHub" />
        </div>
      </div>
      <div className="relative max-w-none w-full flex justify-center py-16 bg-slate-50 dark:bg-slate-900">
        <div className="max-w-4xl px-4 sm:px-8 xl:px-12 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mb-6">
            Why Pair PortalJS with DataHub?
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
            DataHub is a powerful metadata platform, but its default UI can feel overwhelming for business users. PortalJS lets you craft tailored, branded experiences on top of DataHub so every audience gets the context and navigation they need without changing your backend.
          </p>
        </div>
      </div>
      <div className="flex justify-center">
        <div className="max-w-8xl px-4 sm:px-8 xl:px-12">
          <KeyFeatures productName="DataHub" />
        </div>
      </div>
      <div className="flex justify-center">
        <div className="max-w-8xl px-4 sm:px-8 xl:px-12">
          <CommonUseCases productName="DataHub" />
        </div>
      </div>
      <div className="relative max-w-none w-full flex justify-center bg-slate-50 dark:bg-slate-900">
        <div className="max-w-8xl px-4 sm:px-8 xl:px-12 w-full">
          <FAQ faqItems={faqItems} />
        </div>
      </div>
      <Schedule calendar="https://calendar.app.google/iQkon85iKURfdBtX7" />
    </Layout>
  )
}
